<template>
	<view class="new-comment">
		<van-dialog id="van-dialog"></van-dialog>
		<van-toast id="van-toast"></van-toast>
		<view class="good-info">
			<image :src="currentGoodInfo.gimg"></image>
			<van-cell :title="currentGoodInfo.gname" :label="currentGoodInfo.cname" />
		</view>
		<!-- 用户评价内容区域 -->
		<text class="title">评价内容:</text>
		<van-cell-group>
		  <van-field
		    :value="commentValue"
				type="textarea"
		    placeholder="请输入评价内容..."
		    :border="false"
		    @change="changeCommentValue"
				maxlength="200"
		  />
		</van-cell-group>
		<text class="title">商品评分</text>
		<van-rate class="title" :value="rateValue" @change="changeRateValue" />
		<van-button type="danger" style="position: fixed;bottom: 5px;left: 0;width: 100%;" block @click="addComment">提交评价</van-button>
	</view>
</template>

<script>
	import Dialog from '../../wxcomponents/vant-weapp/dialog/dialog.js'
	import Toast from '../../wxcomponents/vant-weapp/toast/toast.js'
	export default {
		onLoad(state) {
			this.currentGoodInfo = {
				gid: state.gid,
				gname: state.gname,
				gimg: state.gimg,
				cid: state.cid,
				cname: state.cname,
				oid: state.oid
			}
		},
		data() {
			return {
				// 当前评价商品的详细信息
				currentGoodInfo: {},
				// 用户对该商品属性具体值评分
				rateValue: 0,
				// 评价内容绑定
				commentValue: ''
			}
		},
		methods: {
			changeRateValue(newVal) {
				this.rateValue = newVal.detail
			},
			changeCommentValue(newVal) {
				this.commentValue = newVal.detail
			},
			addComment() {
				Dialog.confirm({
				  title: '提示',
				  message: '是否提交评价内容，提交后不可修改?',
				})
				.then(async () => {
					const { data: res } = await uni.$http.post('/comment/add', {
						gid: this.currentGoodInfo.gid,
						uid: uni.getStorageSync('uid'),
						score: this.rateValue,
						substance: this.commentValue,
						id: this.currentGoodInfo.cid,
						oid: this.currentGoodInfo.oid
					})
					if(res.meta.status !== 200) return Toast.fail('请稍后再试')
					uni.switchTab({
						url: '/pages/my/my'
					})
				})
				.catch(() => {
					console.log('取消提交')
				})
			}
		}
	}
</script>

<style>	
	image {
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		width: 60px;
		height: 60px;
	}	

	.van-cell__title {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	
	.title,
	.van-rate {
		padding-left: 15px;
	}
	
	textarea.van-field__input {
		min-height: 180px;
	}
</style>
